<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#yuan{
				width: 400px;
				height: 400px;
			}
			.yuan0{
				width: 0px;
				height: 0px;
				/*background-color: #FF0000;*/
				border-radius: 300px;
				border-top: solid 300px red;
				border-right: solid 300px transparent;
				border-bottom: solid 300px red;
				border-left: solid 300px red;
			}
			.eys{
				width: 50px;
				height: 50px;
				border-radius: 50px;
				background-color: black;
				border: 20px white solid;
				position: absolute;
				top: 120px;
				left: 260px;
				
			}
			.wh{
				width: 300px;
				height: 200px;
				position: absolute;
				bottom: 300px;
				left: 800px;
				background-color: antiquewhite
			}
			.blue{
				width: 100px;
				height: 100px;
				border-radius: 100%;
				border: 10px solid blue;
				float: left;
			}
			.black{
				width: 100px;
				height: 100px;
				border-radius: 100%;
				border: 10px solid black;
				float: left;
				position: absolute;
				left: 90px;
			}
			.green{
				width: 100px;
				height: 100px;
				border-radius: 100%;
				border: 10px solid green;
				position: absolute;
				left: 180px;
			}
			.yellow{
				width: 100px;
				height: 100px;
				border-radius: 100%;
				border: 10px solid yellow;
				position: absolute;
				left: 35px;
				top: 60px;
			}
			.red{
				width: 100px;
				height: 100px;
				border-radius: 100%;
				border: 10px solid red;
				position: absolute;
				left: 145px;	
				top: 60px;
			}
			
		</style>
	</head>
	<body>
		<section>
			<div id="yuan">
				<div class="yuan0">
					<div class="eys">
						
					</div>
				</div>
			</div>
			
			<div class="wh">
				<div class="blue"></div>
				<div class="black"></div>
				<div class="green"></div>
				<div class="yellow"></div>
				<div class="red"></div>
			</div>
			</div>
		</section>
	</body>
</html>
